import HelloWorld from "../01hello/hello-word";
import TodoList from "../01hello/todo-list";
import NewsList from "../02router/news-list"
import MoreList from "../02router/more-list"
import HelloStore from "../03store/hello-store";
import HelloStore2 from "../03store/hello-store2";
import HelloStore3 from "../03store/hello-store3";

import { Link, NavLink, useNavigate } from 'react-router-dom'


// 引入路由
import { Route, BrowserRouter, Routes } from "react-router-dom"

const BasicRoute = () => (
  <BrowserRouter>
    <Aside></Aside>
    <Routes>
      <Route exact path="/hello" element={<HelloWorld title="你好，世界" />} >
        <Route exact path="newslist/:t_cat_plant_pk" element={<NewsList />} ></Route>
        <Route exact path="newslist/more" element={<MoreList />} />
      </Route>
      <Route exact path="/todo-list" element={<TodoList />} />
      <Route exact path="/hello-store" element={<HelloStore />} />
      <Route exact path="/hello-store2" element={<HelloStore2 />} />
      <Route exact path="/hello-store3" element={<HelloStore3 />} />

      {/* 兜底配置 */}
      <Route path="*" element={<HelloWorld />} />
    </Routes>


  </BrowserRouter>
);
function Aside() {
  const Navigate=useNavigate()
  return (
    <div>
    <ul>
      <li><Link to="/hello">hello word</Link></li>
      <li><NavLink to="/todo-list">todo-list</NavLink></li>
      <li><NavLink to="/hello-store">hell-store</NavLink></li>
      <li><NavLink to="/hello-store2">connect和dispath</NavLink></li>
      <li><NavLink to="/hello-store3"></NavLink> useDispatch, useSelector</li>

    </ul>
  
    <button onClick={() => Navigate('/hello/newslist/406')} >党建动态</button>
    </div>
  )
}
export default BasicRoute;